<template>
  <div
    class="dh-input"
    :class="{
      [`dh-input--${props.size}`]:props.size,
      'is-disabled': disabled,
      'is-prepend': $slots.prepend,
      'is-append': $slots.append,
      'is-prefix': $slots.prefix,
      'is-suffix': $slots.suffix,
      'is-focus': focus,
      [`dh-input--${type}`]: type,
     
    }"
  >
    <!-- input -->
    <template v-if="type !== 'textarea'">
      <!-- prepend slot -->
      <div v-if="$slots.prepend" class="dh-input__prepend">
        <slot name="prepend" />
      </div>
      <div class="dh-input__wrapper">
        <!-- prefix slot -->
        <span v-if="$slots.prefix" class="dh-input__prefix">
            <slot name="prefix" />
        </span>
        <input
          class="dh-input__inner"
          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
          ref="inputRef"
          v-bind="attr"
          :disabled="disabled"
          :readonly="readonly"
          :autocomplete="autocomplete"
          :placeholder="placeholder"
          :autofocus="autofocus"
          :form="form"
          v-model="inputValue"
          @input="handleInput"
          @change="handleChange"
          @focus="handlerFocus"
          @blur="handlerBlur"
        />
        <!-- suffix slot -->
        <span v-if="$slots.suffix || isShowClear || isShowPassword" class="dh-input__suffix" @click="keepfocus">
            <slot name="suffix" />
            <Icon 
              icon="circle-xmark"
              v-if="isShowClear"
              class="dh-input__clear"
              @click="handleClear"
             @mousedown.prevent="NOOD"
            />
            <Icon 
              icon="eye"
              v-if="isShowPassword && passwordVisible"
              class="dh-input__password"
              @click="handlePassword"
            />
            <Icon 
              icon="eye-slash"
              v-if="isShowPassword && !passwordVisible"
              class="dh-input__password"
              @click="handlePassword"
            />
        </span>
      </div>
      <!-- append slot -->
      <div v-if="$slots.append" class="dh-input__append">
        <slot name="append" />
      </div>
    </template>
    <!-- textarea -->
    <template v-else>
      <textarea
        class="dh-textarea__wrapper"
        v-bind="attr"
        ref="inputRef"
        :disabled="disabled"
        :readonly="readonly"
        :autocomplete="autocomplete"
        :placeholder="placeholder"
        :autofocus="autofocus"
        :form="form"
        v-model="inputValue"
        @input="handleInput"
        @change="handleChange"
        @focus="handlerFocus"
        @blur="handlerBlur"
      />
    </template>
  </div>
  </template>

<script setup lang="ts">
import { ref, watch, computed, type Ref, useAttrs, nextTick , inject} from "vue";

import { type InputProps, type InputEmits } from "./type";
import { FormItemContextKey } from "../Form/type";
import Icon from "../Icon/Icon.vue";
let focus = ref(false);
defineOptions({
  name: "DhInput",
  // 禁止透传
  inheritattr: false,
});
let inputRef = ref() as Ref<HTMLInputElement>;
const props = withDefaults(defineProps<InputProps>(), {
  type: "text",
  placeholder: "请输入内容",
  autocomplete: "off",
});
let attr = useAttrs();
let inputValue = ref(props.modelValue);
let passwordVisible = ref(true);
watch(
  () => props.modelValue,
  (newValue) => {
    inputValue.value = newValue;
  }
);
const NOOD = ()=>{}
const keepfocus = async ()=>{
  await nextTick()
  inputRef.value.focus()
  
}
//表单
let formValidate = inject(FormItemContextKey)
const onBulrValidate = (tirgger?:string)=>{
  formValidate?.validate(tirgger!).catch((e)=>{
    console.log(e);
    
  })
}
const handleInput = () => {
  
  emits("update:modelValue", inputValue.value!);
  emits("input", inputValue.value!);
  onBulrValidate('input')
};
const emits = defineEmits<InputEmits>();
//是否显示
const isShowClear = computed(() => {
  return (
    props.clearable && !props.disabled && !!inputValue.value && focus.value
  );
});
const isShowPassword = computed(
  () => props.showPassword && !props.disabled && inputValue.value
);
//焦点的时候
const handlerFocus = (event: FocusEvent) => {
  focus.value = true;
  emits("focus", event);
};
//失去焦点的时候
const handlerBlur = (event: FocusEvent) => {
  onBulrValidate('blur');
  focus.value = false;
 
  emits("blur", event);

};
//切换密码图标
const handlePassword = () => {
  passwordVisible.value = !passwordVisible.value;
};
//change事件
const handleChange = () => {

  setTimeout(()=>{
    onBulrValidate('change');
  },1)

  emits("change", inputValue.value!);
 
};
//清除
const handleClear = () => {
  inputValue.value = "";
  emits("update:modelValue", "");
  emits("clear");
  emits("change", "");
  emits("input", "");
};
defineExpose({
  ref: inputRef,
});
</script>

<style scoped>
.is-prepend {
  padding-left: 30px;
}
</style>
